<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="true"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="p-4 flex flex-col gap-[2.25rem]">
      <view class="flex flex-col gap-3">
        <view class="text-[1.75rem] text-[#171B24] font-medium"> 输入验证码 </view>
      </view>
      <view class="">
        <u-message-input mode="bottomLine" focus :breathe="false" @finish="finish"></u-message-input>
      </view>
      <view class="flex flex-col gap-4">
        <view class="w-full h-[2.75rem] flex justify-center items-center rounded-full bg-[#00A9AB] btn" @click="sure">
          <view class="text-[1rem] text-[#E5F6F6] font-medium">完成</view>
        </view>
        <view
          class="text-[.8125rem] font-medium text-center"
          :class="canResend ? 'text-[#00A9AB]' : 'text-[#919499]'"
          @click="resendCode"
        >
          {{ canResend ? '重新获取验证码' : `${countdown}秒后重新获取验证码` }}
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 控制页面滚动状态
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载数据
        countdown: 59, // 验证码倒计时秒数
        timer: null, // 倒计时定时器
        canResend: false, // 是否可以重新发送验证码
        mobile: '', // 手机号码
        captcha: '', // 验证码
        type: '', // 手机号码
        loading: false,
        tempToken: ''
      }
    },
    watch: {
      captcha(newValue, oldValue) {
        const methodMap = {
          1: this.changeBinding,
          2: this.logOff,
          3: this.bindPhoneNumber
        }

        if (this.loading) return
        const method = methodMap[this.type]
        if (method) return method()
      }
    },
    onLoad(e) {
      this.type = e.type
      this.tempToken = e.tempToken
      this.mobile = e.mobile
      this.startCountdown()
    },
    //type == 1 ? changeBinding() : logOff()
    onUnmounted() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },

    methods: {
      sure() {
        // type == 1 user_change_mobile  换绑手机号
        // type == 2 user_mobile_verify 用户身份验证(注销)
        // type == 3 user_bind_mobile 绑定手机号
        const methodMap = {
          1: this.changeBinding,
          2: this.logOff,
          3: this.bindPhoneNumber
        }

        if (this.loading) return
        const method = methodMap[this.type]
        if (method) return method()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      logOn() {},

      startCountdown() {
        this.canResend = false
        this.countdown = 59
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--
          } else {
            clearInterval(this.timer)
            this.canResend = true
          }
        }, 1000)
      },
      async resendCode() {
        if (this.canResend) {
          // 这里添加重新发送验证码的逻辑
          // user_login=登录, user_change_mobile=换绑手机号,user_bind_mobile=绑定手机号, user_mobile_verify=用户身份验证(注销)
          // type == 1 user_change_mobile  换绑手机号
          // type == 2 user_mobile_verify 用户身份验证(注销)
          // type == 3 user_bind_mobile 绑定手机号
          const templateCodeMap = {
            1: 'user_change_mobile',
            2: 'user_mobile_verify',
            3: 'user_bind_mobile'
          }
          let res = await api.sendSms({
            mobile: this.mobile,
            template_code: templateCodeMap[this.type]
          })
          this.captcha = ''

          if (!res.code) return vk.toast(res.msg, 'none')
          this.startCountdown()
        }
      },
      async bindPhoneNumber() {
        if (!this.captcha) return vk.toast('请输入验证码', 'none')
        this.loading = true
        //bindPhone

        let res = await api.bindPhone({
          mobile: this.mobile,
          captcha: this.captcha,
          tempToken: this.tempToken
        })
        console.log('res=666=> ', res)
        if (!res.code) return vk.toast(res.msg, 'none')
        // /吊点滴

        this.loading = false

        vk.setStorageSync('uni_id_token', res.data.userInfo.token)
        vk.setStorageSync('uni_id_token_expired', res.data.userInfo.expire_time)
        vk.setStorageSync('refresh_token', res.data.userInfo.refresh_token)

        vk.setVuex('$user.userInfo', res.data.userInfo)
        vk.reLaunch('/pages/index/index')
      },
      // 注销账号
      async logOff() {
        if (!this.captcha) return vk.toast('请输入验证码', 'none')
        this.loading = true

        let res = await api.deleteAccount({
          mobile: this.mobile,
          captcha: this.captcha
        })
        this.loading = false

        if (!res.code) return vk.toast(res.msg, 'none')
        vk.myfn.logout()
      },
      // 换绑手机号码
      async changeBinding() {
        if (!this.captcha) return vk.toast('请输入验证码', 'none')
        this.loading = true
        let res = await api.changePhone({
          mobile: this.mobile,
          captcha: this.captcha
        })
        this.loading = false

        if (!res.code) return vk.toast(res.msg, 'none')
        vk.myfn.logout()
      },

      finish(e) {
        console.log('🚀 ~ finish ~ e:', e)
        this.captcha = e
      }
    }
  }
</script>

<style lang="scss" scoped></style>
